<template>
  <div>
    <div class="top-toolbar float-right">
      <q-btn-dropdown icon="notifications" class="top-info">
        <!-- 下拉内容 -->
        <q-list link>
          <q-item>
            <q-item-main>
              <q-item-tile label>{{$q.i18n.xw.top.downmenu.notify}}</q-item-tile>
            </q-item-main>
            <q-item-side right icon="notifications_active"/>
          </q-item>
        </q-list>
      </q-btn-dropdown>

      <q-btn-dropdown icon="settings" class="top-info">
        <!-- 下拉内容 -->
        <q-list link>
          <q-item>
            <q-item-main>
              <q-item-tile label>{{$q.i18n.xw.top.downmenu.config}}</q-item-tile>
            </q-item-main>
            <q-item-side right icon="settings"/>
          </q-item>
        </q-list>
      </q-btn-dropdown>
      <img v-if="currUser.img" :src="currUser.img" class="q-item-avatar" style="width: 33px;height: 33px;position: absolute;top: 2px;right: 64px;z-index: 1;display: none;">
      <q-btn-dropdown no-caps icon="face" :label="currUser.username" class="top-info">
        <!-- 下拉内容 -->
        <q-list link>
          <q-item>
            <q-item-main>
              <q-item-tile label>{{$q.i18n.xw.top.downmenu.person}}</q-item-tile>
            </q-item-main>
            <q-item-side right icon="person"/>
          </q-item>
          <q-item>
            <q-item-main>
              <q-item-tile label>{{$q.i18n.xw.top.downmenu.password}}</q-item-tile>
            </q-item-main>
            <q-item-side right icon="build"/>
          </q-item>
          <q-item>
            <q-item-main>
              <q-item-tile label>{{$q.i18n.xw.top.downmenu.security}}</q-item-tile>
            </q-item-main>
            <q-item-side right icon="verified_user"/>
          </q-item>
          <q-item @click.native="logout">
            <q-item-main>
              <q-item-tile label>{{$q.i18n.xw.top.downmenu.logout}}</q-item-tile>
            </q-item-main>
            <q-item-side right icon="power_settings_new"/>
          </q-item>
        </q-list>
      </q-btn-dropdown>
    </div>
    <div class="top-menu float-right">
      <div v-for="(item) in menus"
           :class="'item float-left ' + (active==item.id?'active':'')"
           @click="clickMenu(item)">{{item.name}}
      </div>
    </div>
  </div>
</template>

<script>
  import authManager from "@/service/auth/auth";
  import {getMenus, setMenus, getCurrUser, setCurrUser, clean} from "@/libs/cache";

  export default {
    data() {
      return {
        active: 1,
        currUser: {},
        menus: []
      };
    },
    methods: {
      async getUserInfo() {
        let userInfo = getCurrUser();
        if (!userInfo) {
          let respData = {
            data: {
              wxuser: {username: 'test'}
            }
          };//await userManager.findInfo();
          userInfo = respData.data;
          if (userInfo && userInfo.wxuser) {
            let wxuser = userInfo.wxuser;
            userInfo.username = wxuser.nickName;
            userInfo.img = wxuser.avatarUrl;
          }
          setCurrUser(userInfo);
        }
        this.currUser = userInfo;
      },
      async initMenu() {
        let menuData = getMenus();
        if (!menuData) {
          menuData = await authManager.findMenus();
          menuData = menuData.data;
        }
        setMenus(menuData);

        //设置菜单国际化
        this.setMenuI18n(menuData);

        this.menus = menuData;
        this.clickMenu(this.menus[0]);
      },

      clickMenu(item) {
        //存储菜单选中状态
        this.$store.commit('menu/setCurrentTopMenu', item);

        this.active = item.id;
        setTimeout(() => {
          this.$root.$emit('loadAppMenu', {pid: item.id, subItems: item.subItems});
        }, 150)
      },
      setMenuI18n(menuData, pid) {
        menuData.forEach(item => {
          if (item.subItems && item.subItems.length > 0) {
            this.setMenuI18n(item.subItems, item.id);
          }
          item.ext_id = pid ? (pid + '-' + item.id) : item.id;
          item.name = this.$q.i18n.xw.menu[item.ext_id];
        })
      },
      logout() {
        clean();
        this.$router.push("/login");
      }
    },
    mounted() {
      this.getUserInfo();
      this.initMenu();
    }
  };
</script>

<style lang="scss">
  .top-menu {
    .item {
      height: 33px;
      line-height: 33px;
      padding: 0 20px 0 20px;
      cursor: pointer;
      color: #ccc;
    }
    .item:hover {
      border-bottom: 2px solid #51a9f0;
      color: #51a9f0;
    }
    .active {
      border-bottom: 2px solid #51a9f0;
      color: #51a9f0;
    }
  }

  .top-toolbar {
    margin-left: 50px;
    position: relative;
    .top-info {
      .q-btn-dropdown-arrow {
        display: none;
      }

    }
  }

  .animate-popup-down {
    .q-list {
      .q-icon {
        font-size: 20px;
      }
    }
    /*处理顶部下拉菜单，会影响页面select控件下沉效果*/
    /*top: 45px !important;*/
  }
</style>
